<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1,user-scalable=0" name="viewport">
    <title>储值卡列表</title>
    <link href="../../public/plugin/weui/weui.min.css" rel="stylesheet">
    <link href="../../public/plugin/jquery-weui/css/jquery-weui.min.css" rel="stylesheet">
    <link href="../../public/plugin/vant/index.css" rel="stylesheet">
    <link href="../../public/css/iconfont.css?v=20210227" rel="stylesheet">
    <link href="../../public/css/common.css" rel="stylesheet">
</head>

<style type="text/css">
</style>

<body>
<div id="app" style="overflow-y: auto;" v-cloak>
    <!-- 卡集合 -->
    <div>
        <div @click="openCardDetails(item.cardNo)" class="card-baseInfo" v-for="item in cardList">
            <div class="card-log">VIP</div>
            <div class="card-name">{{item.cardName}}</div>
            <div class="card-no">{{item.cardNo}}</div>
            <div class="card-balance">{{item.balance}}</div>
        </div>
    </div>
    <!-- 开卡按钮 -->
    <div style="margin: 30px 16px;">
        <van-button @click="applyOpenCard" block native-type="submit" round type="primary" v-if="cardList.length<3">
            申请开卡
        </van-button>
    </div>
</div>
<script src="../../public/plugin/jquery/jquery.min.js" type="text/javascript"></script>
<script src="../../public/plugin/jquery-weui/js/jquery-weui.min.js" type="text/javascript"></script>
<script src="../../public/plugin/vue/vue.min.js" type="text/javascript"></script>
<script src="../../public/plugin/vant/vant.min.js" type="text/javascript"></script>
<script src="../../public/plugin/moment/moment.min.js" type="text/javascript"></script>
<script src="../../public/js/common.js?v=20230615002" type="text/javascript"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            memberInfo: {},
            loading: false,
            cardList: []
        },
        mounted: function () {
            let self = this;
            MemberUtils.getMemberInfo().then(function (res) {
                console.log("会员基础信息");
                console.log(res);
                if (res && res.code === 200) {
                    setCookie(COOKIE_MEMBER_ID, res.data.id, 30);
                    self.memberInfo = res.data;
                    self.getCardList();
                }
            })
        },
        methods: {
            getCardList: function () {
                let self = this;
                CardUtils.getCardList(self.memberInfo.id).then(res => {
                    if (res && res.code === 200) {
                        self.cardList = res.data;
                    }
                })
            },
            applyOpenCard: function () {
                let self = this;
                self.openCard();
            },
            openCard: function () {
                let self = this;
                if (!self.loading) {
                    self.loading = true;
                    CardUtils.openCard(self.memberInfo.id).then(res => {
                        if (res && res.code === 200) {
                            self.getCardList();
                            self.loading = false;
                            $.toptip(res.msg || '开卡成功', 'success');
                        }
                    })
                } else {
                    $.toptip('开卡中请稍等', 'success');
                }
            },
            openCardDetails: function (cardNo) {
                window.location.href = "../card/details.html?cardNo=" + cardNo;
            }
        }
    });
</script>
</body>
</html>
